// 源插件
import React, { PureComponent } from 'react';
import {
  DateDiff,
  DateStamp,
  DateString,
  FormatnumberZero,
  Mover,
  NumberDivide,
  getNowFormatDate
} from '@/function.js';
// 视图插件
import { Card, Col, DatePicker, Form } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
// css OR less预编译器
import styles from './F.less';

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ dpPandect }) => ({
  dpPandect,
}))
@Form.create()
class DailyProfitPandect extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: [],
    addVisible: false,
    updateVisible: false,
    row: {},
    targetPrice: 0, // 目标价
    Visible: false,
    ExpireVisible: false,
    currency: '',
    dataDate: '',
    date1:'',
  };

  dataSourceChange(date1) {
    const { dispatch } = this.props;
    const that = this;
    let style = styles;
    dispatch({
      type: 'dpPandect/GetProfitPandect',
      payload: date1,
      callback: res => {
        const { list } = res;
        const Element = [];
        for (let i = list.length-1; i >= 0; i--) {
          const item = list[i];
          const ElementItem = (
            <tr className={i===list.length-1?style['total']:''}>
              <td style={{ textAlign: 'left' }}  colSpan="1" rowSpan="1">{item.bankName}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.stockPositionSize)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.stockTodayProfit)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.optionPositionSize)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.optionTodayProfit)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.aqPosition)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.aqMarketValue)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.aqTodayProfit)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1" contentEditable={true}/>

              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.dqPosition)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.dqMarketValue)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.dqTodayProfit)}</td>
              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1" contentEditable={true}/>

              <td style={{ textAlign: 'right' }}  colSpan="1" rowSpan="1">{NumberDivide(item.sumTodayProfit)}</td>
          </tr>
          );
          Element.push(ElementItem);
        }
        that.setState({
          dataSource: Element,
          dataDate: (list[0].date || null).split(' ')[0] ,
        });
      },
    });
  }

  onSelectDate1(e) {
    this.setState({
      date1: getNowFormatDate(e._d),
    },()=>{
      this.dataSourceChange(this.state.date1);
    });
  }

  render() {
    const { dataDate, dataSource } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          选择日期：{' '}
          <DatePicker
            // showTime
            placeholder="请选择"
            format="YYYY-MM-DD"
            style={{ width: 200, marginRight: 25 }}
            onChange={this.onSelectDate1.bind(this)}
          />
          <br/>
          <br/>
          <table border="true" style={{ width: '100%' }} className={styles.tableUse}>
            <tbody>
            <tr>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1"/>
              <td style={{ textAlign: 'center' }}  colSpan="2" rowSpan="1">股票</td>
              <td style={{ textAlign: 'center' }}  colSpan="2" rowSpan="1">期权</td>
              <td style={{ textAlign: 'center' }}  colSpan="4" rowSpan="1">AQ</td>
              <td style={{ textAlign: 'center' }}  colSpan="4" rowSpan="1">DQ</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">总计盈亏</td>
            </tr>
            <tr className={styles['gray']} >
              <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">{dataDate}</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">敞口</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">今日盈亏</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">敞口</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">今日盈亏</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">敞口</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">合约价值</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">盈亏</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">说明</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">敞口</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">合约价值</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">盈亏</td>
              <td style={{ textAlign: 'center' }}  colSpan="1" rowSpan="1">说明</td>
              <td colSpan="1" rowSpan="1"></td>
            </tr>
            {dataSource}
            </tbody>
          </table>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange('');
  }

  componentWillUnmount() {}
}

export default DailyProfitPandect;
